<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			html,
			body {
				height: 100vh;
				background-image: url(images/nav_bg.jpg);
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}

			/* 中间部分容器 */
			#menu {
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				width: 60%;
				height: 60%;
				background-color: rgba(0, 0, 0, 0.1);
				box-shadow: 8px 8px 35px #FFFFFF;
				border-radius: 5px;
				user-select: none;
			}

			/* 清除浮动 */
			#menu::after {
				content: "";
				display: table;
				clear: left;
			}

			/* 容器的左右两部分 */
			.left,
			.right {
				float: left;
				height: 100%;
			}

			.left {
				position: relative;
				width: 35%;
				overflow: hidden;

			}

			/* 左侧图片遮罩 */
			.left:hover .discover {
				transform: scale(0) rotate(360deg);
			}

			/* 图片放大动画 */
			.left:hover img {
				transform: scale(1.1);
			}

			.right {
				width: 65%;
			}

			.wheather {
				position: fixed;
				left: 10px;
				top: 10px;
				user-select: none;
			}

			.topic {
				height: 70%;
				margin: 0 auto 30px;
				border-bottom: 1px solid #FFAAFF;
			}

			/* 遮罩样式类 */
			.discover {
				width: 100%;
				height: 100%;
				background-color: #000000;
				position: absolute;
				left: 0;
				top: 0;
				opacity: 0.1;
				transition: all 1s;
			}

			/* 底部信息 */
			#footer {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				text-align: center;
				font-size: 12px;
				font-weight: 300;
				color: rgba(0, 0, 0, 0.8);
			}

			/* 工信部连接标签样式 */
			#footer a {
				color: rgba(0, 0, 0, 0.8);
				text-decoration: none;
				font-size: 12px;
				font-weight: 300;
			}

			/* 版权信息 */
			#footer #copy {
				position: relative;
				bottom: -20px;
				transition: all 1s;
			}

			/* 底部文字选中效果 */
			#footer p::selection,
			#footer a::selection {
				color: #FFFFFF;
				background-color: #E84893;
				text-shadow: none;
			}

			#run-long {
				position: fixed;
				left: 0;
				bottom: 0;
			}

			.btn {
				margin: 0 5px;
				border: transparent;
				outline: none;
				height: 42px;
				line-height: 42px;
				color: #fff;
				box-shadow: 0 0 5px #ffaaff;
				background: #28c58d;
				display: inline-block;
				padding: 0 36px;
				font-family: Avenir-Heavy;
				font-size: 14px;
				color: #fff;
				text-align: center;
				border-radius: 4px;
				text-decoration: none;
				transition: all 0.5s;
			}

			.btn:hover {
				color: #000000;
				background: #ffff00;
			}

			.btn-group {
				text-align: center;
				padding: 15px 0;
			}

			.green {
				background: #28c58d;
			}

			.blue {
				background: #2dacec;
			}

			.pink {
				background: #b1149e;
			}
		</style>
	</head>
	<body>
		<!-- 最外层容器 -->
		<div id="menu">
			<!-- 左侧图片 -->
			<div class="left">
				<img style="width: 100%;height: 100%;position: absolute;display: block;transition: all 1s;" src="images/nav_left.jpg">
				<!-- <div class="discover"></div> -->
			</div>
			<!-- 右侧功能区 -->
			<div class="right">

				<div class="topic">
					<div class="demo"></div>
				</div>
				<div class="btn-group">
					<button class="btn green">心情随笔</button>
					<button class="btn pink" onclick="location.href='http://www.scsoul.top/login'">CMS后台</button>
					<button class="btn blue" onclick="fireworks()">点赞(5671)</button>
				</div>
			</div>
		</div>
		<div class="wheather">
			<iframe width="250" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&amp;id=12&amp;icon=2&amp;num=1"></iframe>
		</div>
		<!-- 底部信息 -->
		<div id="footer">
			<p id="run-long">本站累计运行：<span id="time"></span>
				<!--累计登录：<span id="loginCount">0</span>人/次-->
			</p>
			<!-- 运行信息 -->
			<p id="footer-run"></p>
			<!-- 版权 -->
			<p id="copy">
				Copyright © 2020 - 2021 星时代爪哇 scsoul.top All Rights Reserved.
				<a href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备2020030393号-1</a>
			</p>
		</div>
		<script src="js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.fireworks.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				welcome();
				runLong("2021-01-01");
			})

			// 烟花
			function fireworks() {
				$('body').fireworks({
					sound: true, // 声音效果
					opacity: 0.9,
					width: '100%',
					height: '100%'
				});
				setTimeout(function() {
					location.reload()
				}, 11000)
			}
			//底部动画效果
			function welcome() {
				var fr = document.getElementById("footer-run");
				var frTxt = "Running by Nginx and Tomcat on Linux version 1.0.0";
				var frTxtArr = frTxt.split("");
				var i = 0;
				var timer = setInterval(function() {
					fr.innerHTML += frTxtArr[i++];
					if (i >= frTxtArr.length) {
						clearInterval(timer);
						document.getElementById("copy").style.bottom = 0;
					}
				}, 100);
			}

			//运行时长
			function runLong(time) {
				let serverStarTime = new Date(time).getTime();
				renderRunTimeTotal(serverStarTime)
				setInterval(function() {
					renderRunTimeTotal(serverStarTime)
				}, 1000);

				function transTime(time) {
					if (time === '') {
						return '';
					} else {
						var result = '';
						if (time >= 1000) {
							var day = parseInt(time / (24 * 60 * 60 * 1000));
							var hour = parseInt((time % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
							var minute = parseInt(((time % (24 * 60 * 60 * 1000)) % (60 * 60 * 1000)) / (60 * 1000));
							var second = parseInt((((time % (24 * 60 * 60 * 1000)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000);
							if (day != 0) {
								result += day + '天';
							}
							if (hour != 0) {
								if (hour < 10) {
									hour = "0" + hour
								}
								result += hour + '时';
							}
							if (minute != 0) {
								if (minute < 10) {
									minute = "0" + minute
								}
								result += minute + '分';
							}
							if (second != 0) {
								if (second < 10) {
									second = "0" + second
								}
								result += second + '秒';
							}
						}
						if (result == '') {
							result = '0秒';
						}
						return result;
					}
				}

				function renderRunTimeTotal(serverStarTime) {
					let date = new Date().getTime();
					let runTimeTotal = date - serverStarTime;
					$("#time").text(transTime(runTimeTotal))
				}
			}
		</script>
	</body>
</html>
